<template>
    <div style="min-width:809px">
        <div v-if="$route.path == '/make'">
            <div class="vs-search-box">
                <el-form ref="form" :inline="true" :model="paging" label-width="120px">
                    <el-form-item label="顾客姓名：">
                        <el-input style="width:200px" placeholder="支持任意关键字搜索" v-model="paging.name"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码：">
                        <el-input style="width:200px" placeholder="支持手机尾号4位搜索" v-model="paging.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="订单编号：">
                        <el-input style="width:200px" placeholder="支持订单后4位搜索" v-model="paging.reserve_num"></el-input>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                    <el-form-item label="预约方式：">
                        <el-select style="width:200px" clearable v-model="paging.mode" placeholder="请选择">
                            <el-option label="大众点评" value="0"> </el-option>
                            <el-option label="小程序" value="1"> </el-option>
                            <el-option label="电话" value="2"> </el-option>
                            <el-option label="我的管家" value="3"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预约日期：">
                        <el-date-picker style="width:300px" range-separator="至" v-model="paging.start_date"
                            value-format="yyyy-MM-dd" type="daterange" placeholder="">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="预计到店时间：">
                        <el-time-picker is-range v-model="paging.start_time" range-separator="至" arrow-control
                            value-format="HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="">
                        </el-time-picker>
                    </el-form-item>

                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <!-- <div class="title-left"> 分销列表 </div> -->
                    <el-button icon="el-icon-plus" @click="utils.goUrl('/makeInfo?title=预约添加')"
                        style="margin-left:auto;" type="primary">新增</el-button>
                    <el-button v-if="utils.getIsShopowner()" icon="el-icon-download">导出</el-button>
                </div>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%">
                    <el-table-column label="会员标识" min-width="90">
                        <template slot-scope="scope">
                            <i v-if="scope.row.user && scope.row.user.vip_id > 0" class="el-icon-star-on"></i>
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" width="70px" label="预约ID"></el-table-column>
                    <el-table-column prop="date" label="预约日期" width="100"> </el-table-column>
                    <el-table-column prop="time" label="预计到店时间" width="80"> </el-table-column>
                    <el-table-column prop="name" label="顾客姓名"></el-table-column>
                    <el-table-column label="性别" width="70">
                        <template slot-scope="scope">
                            {{ scope.row.gender | typeGender }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="mobile" label="手机号码"> </el-table-column>
                    <el-table-column prop="number" label="预约人数"> </el-table-column>
                    <el-table-column prop="title" label="预约项目" min-width="140">
                        <template slot-scope="scope">
                            <span v-for="(item, i) in scope.row.projects" :key="i">{{ item.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="预约方式" min-width="80">
                        <template slot-scope="scope">
                            {{ scope.row.mode | typeMode }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_amount" label="总金额"> </el-table-column>
                    <el-table-column prop="advance_amount" label="预付金额"> </el-table-column>
                    <el-table-column prop="order_num" width="170" label="订单编号"> </el-table-column>
                    <el-table-column prop="remark" label="备注">
                        <template slot-scope="scope">
                            <span class="line-2">{{ scope.row.remark }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态">
                        <template slot-scope="scope">
                            <span class="line-2">{{ scope.row.status == 1 ? '正常' : '消单' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" width="109" label="操作">
                        <template slot-scope="scope">
                            <span @click="setRow(1, scope.row)" class="tab-table-text">查看</span>
                            <template v-if="scope.row.status == 1 && !scope.row.is_bill">
                                <span @click="setRow(2, scope.row)" class="tab-table-text">编辑</span>
                                <span @click="setRow(4, scope.row)" class="tab-red-text">消单</span>
                                <span @click="setRow(3, scope.row)" class="tab-lv-text">开单</span>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="paging.page" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
        <el-dialog title="消单原因" width="500px" append-to-body :before-close="handleClose" :close-on-click-modal="false"
            :visible.sync="isSingle">
            <el-alert show-icon title="订单取消后无法恢复，请考虑好再操作" type="warning">
            </el-alert>
            <h3>请选择取消订单原因</h3>
            <div class="single-box">
                <div class="single-chind" v-for="(item, i) in causeList" :key="i" @click="causeIndex = i">
                    <span>{{ item }}</span>
                    <i :class="causeIndex == i ? 'el-icon-success active-icon' : 'iconfont icon-weixuanzhong'" class=""></i>
                </div>
                <div class="single-chind" style="justify-content: flex-start;">
                    其他：<input v-model.trim="textCause" type="text">（请填写）
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="singleClick">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="消单申请" width="500px" :close-on-click-modal="false" :visible.sync="isApply">
            <el-descriptions :column="1" border>
                <el-descriptions-item label="订单编号"> {{ ruleForm.order_num }} </el-descriptions-item>
                <el-descriptions-item label="顾客姓名"> {{ ruleForm.name }} </el-descriptions-item>
                <el-descriptions-item label="手机号码"> {{ ruleForm.mobile }} </el-descriptions-item>
                <el-descriptions-item label="消单金额"> {{ ruleForm.advance_amount }} </el-descriptions-item>
                <el-descriptions-item label="消单原因">

                    <div @click="selectCause" style="cursor: pointer;">
                        <span v-if="cause">
                            {{ cause }}
                        </span>
                        <div v-else style="text-align: right;">
                            请选择<i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <!-- <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="订单编号：" prop="order_num">
                    {{ruleForm.order_num}}
                </el-form-item>
                <el-form-item label="顾客姓名：" prop="name">
                    {{ruleForm.name}}
                </el-form-item>
                <el-form-item label="手机号码：" prop="mobile">
                    {{ruleForm.mobile}}
                </el-form-item>
                <el-form-item label="消单金额：" prop="advance_amount">
                    {{ruleForm.advance_amount}}
                </el-form-item>
                <el-form-item label="消单原因：" prop="return_remark">
                    
                </el-form-item>
            </el-form> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="isApply = false;">取 消</el-button>
                <el-button type="primary" @click="delReserve">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 开单详情 -->
        <el-dialog title="查看详情" width="600px" :close-on-click-modal="false" :visible.sync="isInfo">
            <el-descriptions :column="2" border>
                <el-descriptions-item label="订单编号">{{ info.order_num }}</el-descriptions-item>
                <el-descriptions-item label="顾客姓名">{{ info.name }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ info.gender | typeGender }}</el-descriptions-item>
                <el-descriptions-item label="手机号码">{{ info.mobile }}</el-descriptions-item>
                <el-descriptions-item label="预约方式">{{ info.mode | typeMode }}</el-descriptions-item>
                <el-descriptions-item label="预约日期">{{ info.date }}</el-descriptions-item>
                <el-descriptions-item label="预计到店时间">{{ info.time }}</el-descriptions-item>
                <el-descriptions-item label="预约人数">{{ info.number }}</el-descriptions-item>
                <el-descriptions-item label="预约项目">
                    <span v-for="(item, i) in info.projects" :key="i">{{ item.name }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="订单总额">{{ info.total_amount }}</el-descriptions-item>
                <el-descriptions-item label="预付金额">{{ info.advance_amount }}</el-descriptions-item>
                <el-descriptions-item label="会员卡号">
                    <span v-if="info.user">
                        {{ info.user.vip_no }}
                    </span>
                </el-descriptions-item>
                <el-descriptions-item label="剩余金额">
                    <span v-if="info.user">
                        {{ info.user.balance }}
                    </span>
                </el-descriptions-item>
                <el-descriptions-item label=""></el-descriptions-item>
                <el-descriptions-item label="备注">{{ info.remark }}</el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="isInfo = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            recordList: [],
            causeList: [
                '顾客行程有变，不能来店',
                '顾客约错门店，重新预约其他门店',
                '顾客找不到门店位置',
                '超过预约时间，但联系不上顾客',
                '顾客觉得停车不方便',
                '顾客指定的技师被约满',
                '房间满员/顾客不愿意拼房'
            ],
            cause: '',
            causeIndex: null,
            textCause: '',
            loading: false,
            loading2: false,
            isBtn: false,
            isInfo: false,
            dialogVisible: false,
            isSingle: false,//消单原因
            isApply: false,//消单申请
            info: {},
            ruleForm: {},
            paging: {
                name: '',//姓名
                mobile: '',//手机
                reserve_num: '',//单号
                mode: '',//预约方式 0大众点评 1小程序 2电话 3我的管家
                start_date: '',  //开始日期
                end_date: '',    //结束日期
                start_time: '',//开始时间
                end_time: '',//结束时间
                page: 1,
                total: 0,
                limit: 10,
            },
            form: {
                date: "",
            },
            tableData: []
        };
    },
    watch: {
        isApply(val) {
            if (!val) {
                this.cause = "";
                this.causeIndex = null;
                this.textCause = "";
            }
        }
    },
    created() {
        if (this.$route.path == '/make') {
            this.handleCurrentChange(1);
        }
    },
    methods: {
        async delReserve() {
            if (!this.cause) return this.$message.error('请选择消单原因!')
            let { code, data } = await this.$Http.delReserve({ id: this.ruleForm.id, return_remark: this.cause });
            if (code) {
                this.$message.success('消单提交成功!');
                this.isApply = false;
                this.repairGetList()
            }
        },
        selectCause() {
            this.isSingle = true;
            if (this.cause) {
                let index = this.causeList.findIndex(v => v == this.cause);
                this.causeIndex = index;
                if (index == 1) this.textCause = this.cause;
            }
        },
        async setRow(type, row) {
            console.log(row, 'row');
            if (type == 1) {
                this.isInfo = true;
                this.info = Object.assign({}, row);
            } else if (type == 2) {
                this.utils.goUrl('/makeInfo?title=预约修改&id=' + row.id)
            } else if (type == 3) {
                this.utils.goUrl(`/billing?id=${row.id}&user_id=${row.user ? row.user.id : ''}${row.order_num ? '&out_trade_no=' + row.order_num : ''}`)
            } else {
                this.isApply = true;
                this.ruleForm = row;
            }
        },
        singleClick() {
            if (this.textCause) {
                this.cause = this.textCause;
            } else if (this.causeIndex != null) {
                this.cause = this.causeList[this.causeIndex];
            }
            this.isSingle = false
        },
        handleClose(dom) {
            this.isSingle = false;
            this.causeIndex = null;
            this.textCause = "";
            dom && dom();
        },
        async repairGetList() {
            let obj = Object.assign({}, this.paging);
            obj.end_date = obj.start_date[1];
            obj.start_date = obj.start_date[0];

            obj.end_time = obj.start_time[1];
            obj.start_time = obj.start_time[0];
            this.loading = true;
            let { code, data } = await this.$Http.getReserve(obj);
            this.loading = false;
            if (code) {

                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {//重置
            this.paging = this.$options.data().paging;
            this.form.date = '';
            this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}

.single-box {
    margin-top: 20px;

    .single-chind {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        min-height: 30px;

        input {
            border-width: 0 0 1px 0;
            padding: 0 5px 5px 5px;
            width: max-content;
            max-width: 330px;

            &:focus {
                outline: none;
            }
        }

        .active-icon {
            color: #d9001b;
        }

        i {
            font-size: 22px;
        }
    }
}

.vs-table-box {
    .el-icon-star-on {
        font-size: 36px;
        color: #ffff00;
        -webkit-text-stroke: 1px #cc93e1;
        // text-shadow: -1px 1px 0 #CC93E1, 1px 1px 0 #CC93E1,1px -1px 0 #CC93E1,-1px -1px 0 #CC93E1;
    }
}
</style>